<template>
  <a-drawer
    v-model:open="Detailopen"
    title="项目详情"
    width="800"
    :closable="false"
    :footer-style="{ textAlign: 'right' }"
    @close="onClose"
  >
    
    <div class="detail-table-title">
      <i></i>基本信息
    </div>
    <div>
      <a-table :columns="detailColumns" :data-source="detailData" bordered>
        <template #bodyCell="{ column, text }">
          <template v-if="column.dataIndex === 'name'">
            <a href="javascript:;">{{ text }}</a>
          </template>
        </template>
      </a-table>
    </div>

    <template #footer>
      <a-button danger style="margin-right: 8px" @click="onClose">删除</a-button>
      <a-button type="primary" @click="onClose">去编辑</a-button>
    </template>
  </a-drawer>
  <a-drawer
    v-model:open="open"
    class="custom-class"
    width="800"
    root-class-name="root-class-name"
    :root-style="{ color: 'blue' }"
    style="color: red"
    title="项目常用电话"
    placement="right"
    @after-open-change="afterOpenChange"
  >
    <a-tag
      color="processing"
      closable
      style="height: 50px; line-height: 50px; width: 100%; font-size: 14px"
      @close="log"
    >
      将展示在用户移动端的"常用电话"页面。如果项目不使用用户移动端，则无需添加。
    </a-tag>

    <a-button type="primary" style="margin-top: 20px; margin-bottom: 20px">
      添加分类
    </a-button>
    <a-table :columns="telcolumns" :data-source="teldata" bordered>
      <template #bodyCell="{ column, text }">
        <template v-if="column.dataIndex === 'name'">
          <a>{{ text }}</a>
        </template>
      </template>
    </a-table>
  </a-drawer>
  <a-table :columns="columns" :data-source="data">
    <template #headerCell="{ column }">
      <template v-if="column.key === 'name'">
        <span>
          <smile-outlined />
          名称项目
        </span>
      </template>
    </template>

    <template #bodyCell="{ column, record }">
      <template v-if="column.key === 'name'">
        {{ record.name }}
      </template>
      <template v-if="column.key === 'tel'">
        <a @click="showDrawer">查看</a>
      </template>
      <template v-else-if="column.key === 'tags'">
        <span>
          <a-tag
            v-for="tag in record.tags"
            :key="tag"
            :color="
              tag === 'loser'
                ? 'volcano'
                : tag.length > 5
                ? 'geekblue'
                : 'green'
            "
          >
            {{ tag.toUpperCase() }}
          </a-tag>
        </span>
      </template>
      <template v-else-if="column.key === 'action'">
        <span>
          <a @click="showDetailDrawer">详情</a>
          <a style="color: red; margin-left: 10px" @click="showConfirm">删除</a>
          <down-outlined />
        </span>
      </template>
    </template>
  </a-table>
</template>
  <script setup>
import { ref } from 'vue'
import { ExclamationCircleOutlined } from '@ant-design/icons-vue'
import { createVNode } from 'vue'
import { Modal } from 'ant-design-vue'


const sharedOnCell = (_, index) => {
  if (index === 4) {
    return {
      colSpan: 0,
    };
  }
};
const detailData = [
  {
    key: '1',
    name: 'John Brown',
    age: 32,
    tel: '0571-22098909',
    phone: 18889898989,
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    tel: '0571-22098333',
    phone: 18889898888,
    age: 42,
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    age: 32,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Sidney No. 1 Lake Park',
  },
  {
    key: '4',
    name: 'Jim Red',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'London No. 2 Lake Park',
  },
  {
    key: '5',
    name: 'Jake White',
    age: 18,
    tel: '0575-22098909',
    phone: 18900010002,
    address: 'Dublin No. 2 Lake Park',
  },
];
const detailColumns = [
  {
    title: 'Name',
    dataIndex: 'name',
    customCell: (_, index) => ({
      colSpan: index < 4 ? 1 : 5,
    }),
  },
  {
    title: 'Age',
    dataIndex: 'age',
    customCell: sharedOnCell,
  },
  {
    title: 'Home phone',
    colSpan: 2,
    dataIndex: 'tel',
    customCell: (_, index) => {
      if (index === 2) {
        return {
          rowSpan: 2,
        };
      }
      // These two are merged into above cell
      if (index === 3) {
        return {
          rowSpan: 0,
        };
      }
      if (index === 4) {
        return {
          colSpan: 0,
        };
      }
    },
  },
  {
    title: 'Phone',
    colSpan: 0,
    dataIndex: 'phone',
    customCell: sharedOnCell,
  },
  {
    title: 'Address',
    dataIndex: 'address',
    customCell: sharedOnCell,
  },
];

const Detailopen = ref(false);
const childrenDrawer = ref(false);
const showDetailDrawer = () => {
  Detailopen.value = true;
};
const onClose = () => {
  Detailopen.value = false;
};
const showChildrenDrawer = () => {
  childrenDrawer.value = true;
};
const telcolumns = [
  {
    title: '分类名称',
    dataIndex: 'name',
  },
  {
    title: '电话',
    className: 'column-money',
    dataIndex: 'money',
  },
  {
    title: '排序',
    dataIndex: 'address',
  },
  {
    title: '状态',
    dataIndex: 'address',
  },
  {
    title: '操作',
    dataIndex: 'address',
  },
]
const teldata = [
  {
    key: '1',
    name: 'John Brown',
    money: '￥300,000.00',
    address: 'New York No. 1 Lake Park',
  },
  {
    key: '2',
    name: 'Jim Green',
    money: '￥1,256,000.00',
    address: 'London No. 1 Lake Park',
  },
  {
    key: '3',
    name: 'Joe Black',
    money: '￥120,000.00',
    address: 'Sidney No. 1 Lake Park',
  },
]

const showConfirm = () => {
  Modal.confirm({
    title: 'Do you want to delete these items?',
    icon: createVNode(ExclamationCircleOutlined),
    content:
      'When clicked the OK button, this dialog will be closed after 1 second',
    onOk() {
      return new Promise((resolve, reject) => {
        setTimeout(Math.random() > 0.5 ? resolve : reject, 1000)
      }).catch(() => console.log('Oops errors!'))
    },
    onCancel() {},
  })
}
const log = (e) => {
  console.log(e)
}
const open = ref(false)
const afterOpenChange = (bool) => {
  console.log('open', bool)
}
const showDrawer = () => {
  open.value = true
}
const columns = [
  {
    name: '名称项目',
    dataIndex: 'name',
    key: 'name',
  },
  {
    title: '管理面积（㎡）',
    dataIndex: 'age',
    key: 'age',
  },
  {
    title: '可招商面积（㎡）',
    dataIndex: 'zhaoshang',
    key: 'zhaoshang',
  },
  {
    title: '总房源数量（间）	',
    key: 'fangyuan',
    dataIndex: 'fangyuan',
  },
  {
    title: '可招商房源数量（间）	',
    key: 'kefangyuan',
    dataIndex: 'kefangyuan',
  },
  {
    title: '常用电话',
    key: 'tel',
  },
  {
    title: '操作',
    key: 'action',
  },
]
const data = [
  {
    key: '1',
    name: '项目2',
    age: 32,
    tel: 122121,
    zhaoshang: 21,
    fangyuan: 0,
    kefangyuan: 0,
    address: 'New York No. 1 Lake Park',
    tags: ['nice', 'developer'],
  },
]
</script>
<style lang="less" scoped>
 .detail-table-title{
  margin-bottom: 20px;
  display: flex;
  align-items: center;
  i {
    display: inline-block;
    width: 5px;
    height: 12px;
    margin-right: 5px;
    background-color: #2681f3;
  }
 }
</style>